<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<title>index</title>
</head>
<body id="index">
<div id="divContainer">
    <div id="divHeader"></div>
    <div id="divSystems">
        <ul id="sysContent">
            <li><div id="system">全部</div></li>
            <li><div id="systemA">系统A</div></li>
            <li><div id="systemB">系统B</div></li>
            <li><div id="systemC">系统C</div></li>
        </ul>
    </div>
    <div id="divSearch">
        <form name="mainForm" >
            <input type="hidden" id="userId" name="userId"/>
            <input type="hidden" id="userCode" name="userCode"/>
            <input type="hidden" id="userList" name="userList"/>
            <input type="hidden" id="roleList" name="roleList"/>
            <input type="hidden" id="systemList" name="systemList"/>
            <input type="hidden" id="currentSystem" name="currentSystem"/><!-- 当前选中系统的元素ID -->
            <input type="hidden" id="extParam1" name="extParam1"/>
            <input type="hidden" id="extParam2" name="extParam2"/>
            <input type="hidden" id="extParam3" name="extParam3"/>
            <div><span>输入关键字：</span><input type="text" id="keyword"/>
            <input type="button" id="btnSearch"/></div>
        </form>
    </div>
    <div id="divSearchHis" >
        <span>搜索历史：</span>
        <div id="divSearchHisContent">
            <ul id="searchHisContent">
                <li><div title="中华人民共和国">中华人民共和国</div></li>
                <li><div title="中国电信天翼手机">中国电信天翼手机</div></li>
                <li><div title="湖南移动">湖南移动</div></li>
                <li><div title="移动搜索测试">移动搜索测试</div></li>
                <li><div title="合同管理搜索测试">合同管理搜索测试</div></li>
                <li><div title="中国电信">中国电信</div></li>
                <li><div title="湖南公文搜索测试">湖南公文搜索测试</div></li>
                <li><div title="北京天翼公文搜索">北京天翼公文搜索</div></li>
                <li><div title="北京联通">北京联通</div></li>
            </ul>
        </div>
    </div>
    <div id="divSearchHot" >
        <span>搜索热词：</span>
        <div id="divSearchHotContent">
            <ul id="searchHotContent">
                <li><div title="中华人民共和国">中华人民共和国</div></li>
                <li><div title="中国电信天翼手机">中国电信天翼手机</div></li>
                <li><div title="湖南移动">湖南移动</div></li>
                <li><div title="移动搜索测试">移动搜索测试</div></li>
                <li><div title="合同管理搜索测试">合同管理搜索测试</div></li>
                <li><div title="中国电信">中国电信</div></li>
                <li><div title="湖南公文搜索测试">湖南公文搜索测试</div></li>
                <li><div title="北京天翼公文搜索">北京天翼公文搜索</div></li>
                <li><div title="北京联通">北京联通</div></li>
            </ul>
        </div>
    </div>
    <div id="divFooter" >
        版权所有&copy; 湖南拓维信息集团
    </div>
</div>
<div id="divHidden"><form id="hiddenForm"><input type="hidden" id="hiddenParam"/></form></div>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript">
//更改样式方法
function changeSystemStyle(systemName,oldSystemName)
{
    oldClassName = "currSystem";
    if (oldSystemName)
    {
        var eleSystemName = $(oldSystemName);
        if (null != eleSystemName)
        {
            eleSystemName.className = "link";
        }
    }    
    
    $(systemName).className = oldClassName;
    //保存当前系统值
    $('currentSystem').value = systemName;
}

//系统单击事件
function systemClick(event)
{
    event = EventUtil.getEvent(event);
    var target = event.target;    
    //更改样式
    changeSystemStyle(target.id,$('currentSystem').value);
}
//鼠标移入
function mouseOver(event)
{
    event = EventUtil.getEvent(event);
    var target = event.target;    
    oldClassName = target.className;
    target.className=oldClassName + " mouseover";
}

//鼠标移出
function mouseOut(event)
{
    event = EventUtil.getEvent(event);
    var target = event.target;
    target.className=oldClassName;
    oldClassName="";
}

//按键事件
function keypress(event)
{
    event = EventUtil.getEvent(event);
    if (13 === event.charCode)
    {
        searchClick(event);
        event.preventDefault();
    }
}
//失去焦点事件
function blur(event)
{
    //alert("1");
}
//执行搜索
function doSearch(keyword)
{
    $("keyword").value = keyword;
    alert("执行搜索！" + keyword);
}
function searchClick(event)
{
    var keyword = trim($("keyword").value);
    if ("" === keyword)
    {
        alert("关键字为空！");
    }
    else
    {
        doSearch(keyword);
    }
}
//点击关键字搜索
function searchWordClick(event)
{
    event = EventUtil.getEvent(event);
    var target = event.target;
    doSearch(target.title);
}

//加载完成后进行初始化
function init()
{
    //初始化系统样式
    changeSystemStyle("system");
}

//全局变量
var oldClassName="";

//绑定事件
//页面加载完毕
EventUtil.addEventHandler(window,"load",init);
//系统单击事件
EventUtil.addEventHandler($("sysContent"),"click", systemClick);
EventUtil.addEventHandler($("searchHisContent"),"click", searchWordClick);
EventUtil.addEventHandler($("searchHotContent"),"click", searchWordClick);
//搜索按钮单击事件
EventUtil.addEventHandler($("btnSearch"),"click", searchClick);
//搜索框按键事件
EventUtil.addEventHandler($("keyword"),"keypress", keypress);
//搜索框失去焦点
EventUtil.addEventHandler($("keyword"),"blur", blur);
//鼠标移入事件
EventUtil.addEventHandler($("sysContent"),"mouseover", mouseOver);
EventUtil.addEventHandler($("searchHisContent"),"mouseover", mouseOver);
EventUtil.addEventHandler($("searchHotContent"),"mouseover", mouseOver);
//鼠标移出事件
EventUtil.addEventHandler($("sysContent"),"mouseout", mouseOut);
EventUtil.addEventHandler($("searchHisContent"),"mouseout", mouseOut);
EventUtil.addEventHandler($("searchHotContent"),"mouseout", mouseOut);
</script>
</body>
</html>
